<template>
  <div class="card">
    <Title-header title="我的团队"></Title-header>
    <div class="team-stats">
      <div class="team-stats__item" style="padding-right: 40px">
        <div class="team-stats__label">直推人数</div>
        <div class="team-stats__value" :style="getValueStyle(invite_number)">
          {{ invite_number || "0" }}
        </div>
      </div>
      <div class="team-stats__item" style="padding-left: 40px">
        <div class="team-stats__label">团队人数</div>
        <div class="team-stats__value" :style="getValueStyle(team_nums)">
          {{ team_nums || "0" }}
        </div>
      </div>
    </div>
    <div class="team-list">
      <div v-if="teamList.length > 0">
        <my-list
          container-height="360px"
          :loading="loading"
          :finished="finished"
          @load="loadMore"
        >
          <div v-for="item in teamList" :key="item.user_id" class="team-item">
            <div class="team-item__stats">
              <div class="team-item__stat">
                <div class="team-item__label">账号ID</div>
                <div class="team-item__value">{{ item.user_id }}</div>
              </div>
              <div class="team-item__stat">
                <div class="team-item__label">直推人数</div>
                <div class="team-item__value">{{ item.invite_number }}</div>
              </div>
              <div class="team-item__stat">
                <div class="team-item__label">团队人数</div>
                <div class="team-item__value">{{ item.under_team_nums }}</div>
              </div>
            </div>
          </div>
        </my-list>
      </div>
      <div v-else style="height: 360px">
        <van-empty description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TeamTypeList } from "@/types";
import { team } from "@/api/modules/UserInfo";
import { useInfoStore } from "@/store/infoman";

const infoStore = useInfoStore();
// 获取团队信息
const invite_number = ref<string>("");
const team_nums = ref<string>("");
const teamList = ref<TeamTypeList[]>([]);
const page = ref<number>(1);
const pageSize = ref<number>(1);
const getTeam = async (page: number) => {
  try {
    const res = await team({ page: page });
    if (res.code === 0) {
      invite_number.value = res.data.invite_number;
      team_nums.value = res.data.team_nums;
      pageSize.value = res.data.total_page;
      return res.data.list_data;
    }
  } catch (error) {
    console.error("获取团队信息失败:", error);
  }
};

const loading = ref(false);
const finished = ref(false);

// 上拉刷新
const loadMore = async () => {
  if (loading.value || finished.value) return;
  loading.value = true;
  try {
    // 获取实际数据（替换原来的模拟数据）
    const newItems = await getTeam(page.value);
    if (newItems?.length) {
      teamList.value = [...teamList.value, ...newItems];
      page.value++;
    }

    const pageNum = page.value - 1;
    // // 假设最多加载50条
    if (pageNum >= pageSize.value) {
      finished.value = true;
    }
  } finally {
    loading.value = false;
  }
};

// 数值大字体变小
const getValueStyle = (value: string | number) => {
  const numberValue = Number(value);
  if (numberValue > 10000000) {
    return {
      fontSize: "16px", // Smaller font size for large numbers
    };
  }
  return {
    fontSize: "25px", // Default font size for smaller numbers
  };
};

watch(
  () => infoStore.stateLogin,
  (newVal, oldVal) => {
    if (newVal && !oldVal) {
      console.log("====================================");
      console.log("执行团队");
      console.log("====================================");
      loadMore();
    }
  }
);
</script>

<style scoped lang="less">
@import "../styles/common.less";
.team-stats {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 10px 10px 0px rgba(11, 112, 78, 0.15);
  padding: 20px 42px;
  z-index: 10;

  &__item {
    text-align: center;
  }
  &__item:nth-child(1) {
    border-right: 1px solid #2f8463;
  }

  &__value {
    font-size: 25px;
    color: #22825c;
    font-weight: bold;
    margin-top: 13px;
  }

  &__label {
    font-size: 12px;
    color: #22825c;
  }
}

.team-list {
  position: relative;
  z-index: -1;
  padding: 2px 28px 21px;
  background: linear-gradient(91deg, #f1fef7 0%, #f9f5e6 100%);
  border-radius: 10px;

  .team-item {
    &__title {
      color: @text-color-secondary;
    }

    &__stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      text-align: left;
      padding: 18px 0px;
      border-bottom: 1px dashed #2f8463;
    }
    &__stat {
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: center;
    }

    &__value {
      font-size: 14px;
      margin-top: 5px;
    }

    &__label {
      font-size: 11px;
      color: #1b4c37;
    }
  }
}
.team-list::-webkit-scrollbar {
  display: none;
}
</style>
